import React, { useState, useEffect } from "react";
import {
    Row,
    Col,
    Card,
    Table,
    Button,
    Input,
    Modal,
    Form,
    Upload,
    message,
    Tag,
    Space,
    UploadFile,
    Popconfirm,
    Spin,
    Select,
    Empty,
    Tabs,
    Typography
} from "antd";
import {
    DeleteOutlined,
    EditOutlined,
    EyeOutlined,
    SearchOutlined,
    PlusOutlined,
    CloseOutlined,
    Loading3QuartersOutlined,
    LeftOutlined
} from "@ant-design/icons";
import { generateHeaders } from "../../utils/header";
import { useNavigate, useLocation } from 'react-router-dom';

import excel from "../../assets/images/excel.svg";
import SQLite from "../../assets/images/SQLite.svg";
import CSV from "../../assets/images/CSV.svg";
import PDF from "../../assets/images/PDF.svg";

import MySQL from "../../assets/images/MySQL.svg";
import MongoDB from "../../assets/images/MongoDB.svg";
import Oracle from "../../assets/images/Oracle.svg";
import MariaDB from "../../assets/images/MariaDB.svg";

import StarRocks from "../../assets/images/StarRocks.svg";
import Greenplum from "../../assets/images/Greenplum.svg";
import Doris from "../../assets/images/Doris.svg";
import GuassDB from "../../assets/images/GuassDB.svg";
import ArgoDB from "../../assets/images/ArgoDB.svg";
import ElasticSearch from "../../assets/images/ElasticSearch.svg";
import ClickHouse from "../../assets/images/ClickHouse.svg";
import impala from "../../assets/images/impala.svg";
import presto from "../../assets/images/presto.svg";

import Hive from "../../assets/images/Hive.svg";
import MaxCompute from "../../assets/images/MaxCompute.svg";
import DLC from "../../assets/images/DLC.svg";
import Inceptor from "../../assets/images/Inceptor.svg";
import DataBricks from "../../assets/images/DataBricks.svg";
import Iceberg from "../../assets/images/Iceberg.svg";
import Hudi from "../../assets/images/Hudi.svg";
import DeltaLake from "../../assets/images/DeltaLake.svg";

import "./index.less";
import { http } from "../../utils/httpClient";
import { InboxOutlined } from "@ant-design/icons";
// import type { UploadProps } from 'antd';
const { Dragger } = Upload;
interface DocumentItem {
    key: string;
    name: string;
    type: "file" | "folder";
    size?: string;
    modified: string;
    tags?: string[];
}

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
};
// 配置参数
const COMMON_APPID = "dsjyybai";
const COMMON_APPKEY = "bb9c5100caf0f84e22d88451e94ce2bb";

const dataSource: React.FC = () => {
    // 新增状态管理选中项
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [selectedRows, setSelectedRows] = useState<any[]>([]);

    // 配置表格行选择功能
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedKeys: React.Key[], selectedRows: any[]) => {
            setSelectedRowKeys(selectedKeys);
            setSelectedRows(selectedRows);
        },
    };
    const [loading, setLoading] = useState(false);
    const [loadingFile, setLoadingFile] = useState(false);
    const [isModalVisible, setIsModalVisible] = useState(false);

    // 初始化加载数据源列表
    useEffect(() => {
        setLoading(true);
        available();
    }, []);

    // 数据源列表
    const available = () => {
        setLoading(true);
        http
            .post(`${window.config.API_BASE_URL}/chatbiv3/ds/available`, {
                user: "tiantian",
            })
            .then((res: any) => {
                if (res.status_code === "200") {
                    setDocuments(res.details);
                    setLoading(false);
                }
            })
            .finally(() => setLoading(false));
    };
    // 模拟文档数据
    const [documents, setDocuments] = useState<DocumentItem[]>([]);

    // 表格列配置
    const columns = [
        {
            title: "名称",
            dataIndex: "datasource_name",
            key: "datasource_name",
        },
        {
            title: "类型",
            dataIndex: "type",
            key: "type",
            render: (type: any) => (
                <Tag color="blue" key={type}>
                    {type}
                </Tag>
            ),
        },
        {
            title: "用户",
            dataIndex: "user",
            key: "user",
        },
        {
            title: "表数量",
            dataIndex: "table_nums",
            key: "table_nums",
        },
        {
            title: "列数量",
            dataIndex: "column_nums",
            key: "column_nums",
        },
        {
            title: "创建时间",
            dataIndex: "create_at",
            key: "create_at",
        },
        {
            title: "描述",
            dataIndex: "description",
            key: "description",
            ellipsis: true,
        },
        {
            title: "操作",
            key: "action",
            render: (_: any, record: { key: string }) => (
                <Space>
                    <Button
                        size="small"
                        type="link"
                        icon={<EyeOutlined />}
                    // onClick={() => showModal('view', record)}
                    ></Button>
                    <Button
                        size="small"
                        type="link"
                        icon={<EditOutlined />}
                    // onClick={() => showModal('edit', record)}
                    ></Button>
                    <Popconfirm
                        title="确定删除该数据源吗？"
                        onConfirm={() => handleDelete(record)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button size="small" type="link" danger icon={<DeleteOutlined />} />
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    // 单个删除
    const handleDelete = (record: any) => {
        http
            .post(`${window.config.API_BASE_URL}/chatbiv3/deleteds`, {
                source_id: record.datasource_id,
            })
            .then((res: any) => {
                if (res.status_code == 200) {
                    setLoading(true);
                    available();
                    messageApi.open({
                        type: "success",
                        content: res.status_msg,
                    });
                }
            })
            .finally(() => setLoading(false));
    };

    // 批量删除处理函数
    const handleBatchDelete = async () => {
        if (selectedRowKeys.length === 0) {
            messageApi.warning("请至少选择一项进行删除");
            return;
        }
        try {
            setLoading(true);
            // 构造符合要求的参数数组
            http
                .post(`${window.config.API_BASE_URL}/chatbiv3/deleteds`, {
                    source_id: selectedRowKeys, // 直接使用选中的 keys 数组
                })
                .then((res: any) => {
                    if (res.status_code === 200) {
                        messageApi.success(`成功删除 ${selectedRowKeys.length} 项`);
                        available(); // 刷新数据
                        setSelectedRowKeys([]); // 清空选中状态
                    }
                })
                .finally(() => setLoading(false));
        } catch (error) {
            // messageApi.error(`删除失败: ${error.message}`);
        } finally {
            setLoading(false);
        }
    };

    const [messageApi, contextHolder] = message.useMessage();
    // 数据库授权弹窗
    const [open, setOpen] = React.useState(false);
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [form] = Form.useForm();
    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        form.submit();
    };
    const onFinish = (value: any) => {
        console.log(value);
        postData(value);
    };
    const postData = (value: any) => {
        const db_configs = {
            host: value.host,
            port: value.port,
            user: value.user,
            password: value.password,
            database: value.database,
        };
        http
            .post(`${window.config.API_BASE_URL}/chatbiv3/add/mysql`, {
                db_configs,
                user: "tiantian",
                source: value.source,
            })
            .then((res: any) => {
                if (res.status_code == 200) {
                    setConfirmLoading(true);
                    available();
                    messageApi.open({
                        type: "success",
                        content: res.status_msg,
                    });
                    form.resetFields();
                } else {
                    messageApi.open({
                        type: "warning",
                        content: res.result,
                    });
                }
            })
            .finally();
    };
    const handleCancel = () => {
        setOpen(false);
        form.resetFields();
    };
    // 查询处理
    const handleSearch = () => {
        available();
    };
    // 上传文件弹窗
    const [openFile, setOpenFile] = useState(false);
    const [confirmLoadingFile, setConfirmLoadingFile] = useState(false);
    const [formFile] = Form.useForm();
    const [fileList, setFileList] = useState<UploadFile[]>([]);
    // 修改处理函数
    const showModalFile = () => {
        setOpenFile(true);
    };
    const handleOkFile = async () => {
        formFile.submit();
    };
    const onFinishFile = (value: any) => {
        console.log(value);
        postDataFile(value);
    };
    const postDataFile = async (value: any) => {
        setConfirmLoadingFile(true);
        // 检查文件列表
        if (fileList.length === 0) {
            messageApi.open({
                type: "error",
                content: "请至少选择一个Excel文件",
            });
            return;
        }

        if (fileList.length > 0) {
            const formData = new FormData();
            fileList.forEach((element, index) => {
                var suffix = (element as { name: string }) ?.name.substr(
                    (element as { name: string }) ?.name.lastIndexOf(".")
        );
                if (suffix != ".xls" && suffix != ".xlsx") {
                    messageApi.open({
                        type: "warning",
                        content: "仅能处理Excel",
                    });
                    return false;
                }
                formData.append(
                    "files",
                    (fileList[index] as unknown as { originFileObj: any }) ?.originFileObj
        );
            });
            formData.append("source", value.source);
            formData.append("user", "tiantian");
            fetch(window.config.API_BASE_URL + "/chatbiv3/add/excel", {
                method: "POST",
                body: formData,
                headers: generateHeaders(
                    COMMON_APPID,
                    "chatbiv3/add/excel", // capabilityname
                    COMMON_APPKEY
                ),
                redirect: "follow",
            })
                .then(async (response) => {
                    if (!response.ok) throw new Error("上传失败");
                    const result = await response.json();
                    if (result.status_code == "200") {
                        messageApi.open({
                            type: "success",
                            content: result.result,
                        });
                        setConfirmLoadingFile(false);
                        handleCancelFile(); // 关闭弹窗
                        available();
                    } else {
                        messageApi.open({
                            type: "error",
                            content: result.detail,
                        });
                    }
                })
                .catch((err) => {
                    console.error(err);
                    messageApi.open({
                        type: "error",
                        content: "上传失败,文件不符合要求",
                    });

                    handleCancelFile(); // 关闭弹窗
                    available();
                });
        }
    };
    // 关闭弹窗时重置状态
    const handleCancelFile = () => {
        setFileList([]);
        formFile.resetFields();
        setOpenFile(false);
    };
    const [activeKey, setActiveKey] = useState('1');

    const items = [
        {
            key: '1',
            label: <span style={{ padding: '0 20px' }}>我的数据</span>,
            children: (
                <div>
                    {/* 顶部操作栏 */}
                    <Form layout="inline">
                        <Row gutter={16} style={{ width: "100%" }}>
                            <Col span={6}>
                                <Form.Item label="">
                                    <Input placeholder="请输入名称" allowClear />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="">
                                    <Select placeholder="请选择类型" allowClear>
                                        <Select.Option value="excel">excel</Select.Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={12} style={{ textAlign: "right" }}>
                                <Button
                                    type="primary"
                                    icon={<SearchOutlined />}
                                    onClick={handleSearch}
                                    style={{ marginRight: 16 }}
                                >
                                    查询
                                </Button>
                                <Button
                                    type="primary"
                                    icon={<Loading3QuartersOutlined />}
                                    onClick={handleSearch}
                                    style={{ marginRight: 16 }}
                                >
                                    刷新
                                </Button>
                                <Button
                                    danger
                                    icon={<DeleteOutlined />}
                                    onClick={handleBatchDelete}
                                    disabled={!selectedRowKeys.length}
                                // style={{ marginRight: 16 }}
                                >
                                    删除选中项 ({selectedRowKeys.length})
                                </Button>
                                {selectedRowKeys.length > 0 && (
                                    <Button
                                        onClick={() => setSelectedRowKeys([])}
                                    // style={{ marginRight: 16 }}
                                    >
                                        <CloseOutlined /> 清空选择
                                    </Button>
                                )}
                                {/* <Button
                                    type="primary"
                                    icon={<PlusOutlined />}
                                    onClick={() => setIsModalVisible(true)}
                                >
                                    新建
                                </Button> */}
                            </Col>
                        </Row>
                    </Form>
                    {/* 主要内容区域 */}
                    <div style={{ margin: "20px 0" }}>
                        <Spin tip="加载中..." spinning={loading}>
                            <Table
                                rowKey="datasource_id" // 根据你的数据唯一标识字段调整，例如 id 或其他唯一值
                                rowSelection={{
                                    type: "checkbox",
                                    selectedRowKeys,
                                    onChange: setSelectedRowKeys,
                                }}
                                dataSource={documents}
                                columns={columns}
                                rowClassName={() => "document-row"}
                                pagination={{ pageSize: 10 }}
                                locale={{
                                    emptyText:
                                        <Empty
                                            style={{
                                                height: 500,
                                                paddingTop: 100
                                                // display: 'flex',
                                                // justifyContent: 'center',/* 水平居中 */
                                                // alignItems: 'center'
                                            }}
                                            description={
                                                <Typography.Text>
                                                    当前未配置任何数据源，请先配置数据
                                                </Typography.Text>
                                            } />,
                                }}
                            />
                        </Spin>
                    </div>
                </div>
            ),
        },
        {
            key: '2',
            label: <span style={{ padding: '0 20px' }}>本地上传</span>,
            children: (
                <div>
                    <div className="dataSourceCard">
                        <h3>本地文件</h3>
                        <Row gutter={[16, 16]}>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={excel} alt="" />
                                    <h4 className="textCard1">Excel</h4>
                                    <Button className="buttonCard" onClick={showModalFile}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={SQLite} alt="" />
                                    <h4 className="textCard1">SQLite</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={CSV} alt="" />
                                    <h4 className="textCard1">CSV</h4>
                                    <Button className="buttonCard" onClick={showModalFile}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={PDF} alt="" />
                                    <h4 className="textCard1">PDF</h4>
                                    <Button className="buttonCard" onClick={showModalFile}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </div>
            ),
        },
        {
            key: '3',
            label: <span style={{ padding: '0 20px' }}>事务型数据库</span>,
            children: (
                <div>
                    <div className="dataSourceCard">
                        <h3>事务型数据库</h3>
                        <Row gutter={[16, 16]}>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={MySQL} alt="" />
                                    <h4 className="textCard1">MySQL</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Oracle} alt="" />
                                    <h4 className="textCard1">Oracle</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={MariaDB} alt="" />
                                    <h4 className="textCard1">MariaDB</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={MongoDB} alt="" />
                                    <h4 className="textCard1">MongoDB</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </div>
            ),
        },
        {
            key: '4',
            label: <span style={{ padding: '0 20px' }}>分析型数据库</span>,
            children: (
                <div>
                    <div className="dataSourceCard">
                        <h3>分析型数据库</h3>
                        <Row gutter={[16, 16]}>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={StarRocks} alt="" />
                                    <h4 className="textCard1">StarRocks</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Greenplum} alt="" />
                                    <h4 className="textCard1">Greenplum</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Doris} alt="" />
                                    <h4 className="textCard1">Doris</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={GuassDB} alt="" />
                                    <h4 className="textCard1">GuassDB(AP)</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={ArgoDB} alt="" />
                                    <h4 className="textCard1">星环ArgoDB</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={ElasticSearch} alt="" />
                                    <h4 className="textCard1">ElasticSearch</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={ClickHouse} alt="" />
                                    <h4 className="textCard1">ClickHouse</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={impala} alt="" />
                                    <h4 className="textCard1">impala</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={presto} alt="" />
                                    <h4 className="textCard1">presto</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </div>
            ),
        },
        {
            key: '5',
            label: <span style={{ padding: '0 20px' }}>数据湖仓</span>,
            children: (
                <div>
                    <div className="dataSourceCard">
                        <h3>数据湖仓</h3>
                        <Row gutter={[16, 16]}>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Hive} alt="" />
                                    <h4 className="textCard1">Hive(HMS)</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={MaxCompute} alt="" />
                                    <h4 className="textCard1">MaxCompute</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={DLC} alt="" />
                                    <h4 className="textCard1">腾讯云DLC</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Inceptor} alt="" />
                                    <h4 className="textCard1">星环Inceptor</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={DataBricks} alt="" />
                                    <h4 className="textCard1">DataBricks</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Iceberg} alt="" />
                                    <h4 className="textCard1">Iceberg</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={Hudi} alt="" />
                                    <h4 className="textCard1">Hudi</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className="card" variant="borderless">
                                    <img className="imgCard" src={DeltaLake} alt="" />
                                    <h4 className="textCard1">DeltaLake</h4>
                                    <Button className="buttonCard" onClick={showModal}>
                                        新建数据源
                                    </Button>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </div>
            ),
        },
    ];
    const navigate = useNavigate();
    const handleBack = () => {
        // 这里添加返回逻辑，例如使用路由返回     
        navigate(`/chatBI`);
    };
    return (
        <>
            <div className="dataManagement">
                {contextHolder}
                <div className="dataSource">
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        marginBottom: 10,
                        gap: 8
                    }}>
                        <LeftOutlined onClick={handleBack} />
                        <p onClick={handleBack}>返回</p>
                        <h2>数据管理</h2>
                        <h4 style={{ color: "#8c8c8c" }}>使用之前，请先配置您的数据来源</h4>
                        {/* <Button
                            type="text"
                            icon={<LeftOutlined />}
                            onClick={handleBack}
                            style={{
                                border: '1px solid #d9d9d9',
                                borderRadius: 4,
                                padding: '4px 8px'
                            }}
                        /> */}

                    </div>
                    <Tabs
                        tabPosition="left"
                        activeKey={activeKey}
                        items={items}
                        onChange={(key: React.SetStateAction<string>) => setActiveKey(key)}
                        style={{ width: '100%' }}
                    />
                    {/* 数据库授权弹窗 */}
                    <Modal
                        title="新建数据源"
                        open={open}
                        onOk={handleOk}
                        confirmLoading={confirmLoading}
                        onCancel={handleCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Form
                            {...formItemLayout}
                            form={form}
                            variant={"filled"}
                            style={{ maxWidth: 600, padding: 24 }}
                            initialValues={{ variant: "filled" }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                label="数据来源名称"
                                name="source"
                                rules={[{ required: true, message: "请输入数据来源名称!" }]}
                            >
                                <Input placeholder="请输入数据来源名称" />
                            </Form.Item>
                            <Form.Item
                                label="IP/域名"
                                name="host"
                                rules={[{ required: true, message: "请输入IP/域名!" }]}
                            >
                                <Input placeholder="请输入IP/域名" />
                            </Form.Item>

                            <Form.Item
                                label="端口号"
                                name="port"
                                rules={[{ required: true, message: "请输入端口号!" }]}
                            >
                                <Input placeholder="请输入端口号" />
                            </Form.Item>

                            <Form.Item
                                label="数据库名称"
                                name="database"
                                rules={[{ required: true, message: "请输入数据库名称!" }]}
                            >
                                <Input placeholder="请输入数据库名称" />
                            </Form.Item>

                            <Form.Item
                                label="数据库用户名"
                                name="user"
                                rules={[{ required: true, message: "请输入数据库用户名!" }]}
                            >
                                <Input placeholder="请输入数据库用户名" />
                            </Form.Item>

                            <Form.Item
                                label="数据库密码"
                                name="password"
                                rules={[{ required: true, message: "请输入数据库密码!" }]}
                            >
                                <Input placeholder="请输入数据库密码" />
                            </Form.Item>
                        </Form>
                    </Modal>
                    {/* 上传文件弹窗 */}
                    <Modal
                        title="新建数据源"
                        open={openFile}
                        onOk={handleOkFile}
                        confirmLoading={confirmLoadingFile}
                        onCancel={handleCancelFile}
                        okText="确定"
                        cancelText="取消"
                    >
                        {/* <Spin tip="正在学习数据中，请稍等" spinning={loadingFile}> */}
                        <Form
                            {...formItemLayout}
                            form={formFile}
                            variant="filled"
                            style={{ maxWidth: 600, padding: 24 }}
                            initialValues={{ variant: "filled" }}
                            onFinish={onFinishFile}
                        >
                            {/* 数据来源名称输入框 */}
                            <Form.Item
                                label="数据来源名称"
                                name="source" // 建议将name改为source与接口对应
                                rules={[{ required: true, message: "请输入数据来源名称!" }]}
                            >
                                <Input placeholder="请输入数据来源名称" />
                            </Form.Item>

                            {/* 文件上传组件 */}
                            <Form.Item label="选择文件" required>
                                <Dragger
                                    multiple
                                    fileList={fileList}
                                    beforeUpload={(file: {
                                        type: { includes: (arg0: string) => boolean };
                                        name: { endsWith: (arg0: string) => unknown };
                                    }) => {
                                        // 实时验证文件类型
                                        const isExcel =
                                            file.type.includes("spreadsheetml") ||
                                            [".xls", ".xlsx"].some((ext) => file.name.endsWith(ext));
                                        if (!isExcel) {
                                            message.error("仅支持上传Excel文件");
                                            return Upload.LIST_IGNORE;
                                        }
                                        // 阻止自动上传
                                        return false;
                                    }}
                                    onChange={({ fileList }) => setFileList(fileList)}
                                    showUploadList={{
                                        showPreviewIcon: false,
                                        showRemoveIcon: true,
                                    }}
                                >
                                    <p className="ant-upload-drag-icon">
                                        <InboxOutlined />
                                    </p>
                                    <p className="ant-upload-hint">点击或者拖拽文件到这里</p>
                                    <p className="ant-upload-hint">支持多选</p>
                                </Dragger>
                            </Form.Item>
                        </Form>
                        {/* </Spin> */}
                    </Modal>
                </div>
            </div>
        </>
    );
};

export default dataSource;
